import { Button, message, Pagination, Popconfirm, Table, type PaginationProps, type TableColumnsType, type TableProps } from "antd";
import { ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import { useEffect, useState } from "react";
import '../../assets/css/Building/buildingCss.less'
import { AdministratorroleroleList, deleteAdministratorrolerole } from "../../apis/Administratorrole";
import type { AdministratorroleListFace, AdministratorroleListParams, editFace } from "../../type/administratorrole";
import DiaLog from '../../component/administratorrole/DiaLog'
type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];

export default function Administratorrole() {
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    const [columns, setColumns] = useState<TableColumnsType<AdministratorroleListFace>>([
        { title: 'Name', dataIndex: 'name' },
        { title: 'Age', dataIndex: 'age' },
        { title: 'Address', dataIndex: 'address' },
    ]);
    const [Params, setParams] = useState<AdministratorroleListParams>({ page: 1, psize: 10 })
    const [data, setData] = useState<AdministratorroleListFace[]>([])
    const [total,setTotal] = useState<number>()
    const [editContent, setEditContent] = useState<editFace>({id:0,name:''});
    // 添加和修改的打开弹窗
    const [openAdd, setOpenAdd] = useState(false);
    useEffect(() => {
        // 请求数据
        GetData()
    }, [Params]) // 添加 Params 作为依赖项，当分页参数变化时重新获取数据
    // 删除角色
    const del = async (id: number) => {
        const res = await deleteAdministratorrolerole(id)
        if (res.errCode === 10000) {
            message.success('删除成功')
            GetData()
        }
    }
    // 重置数据
    // 传给子组件 判断什么时间进行刷新数据
    const refresh = () => {
        setOpenAdd(false)
        setEditContent({...editContent, id: 0,name:''})
        GetData()
    }
    const GetData = async () => {
        let res = await AdministratorroleroleList(Params)
        if (res.errCode == 10000) {
            setTotal(res.data.counts)
            setData(res.data.list)
            // 更新列定义，添加居中显示
            setColumns([
                { 
                    title: '角色ID', 
                    dataIndex: 'id', 
                    width: 100,
                    align: 'center' // 居中对齐
                },
                { 
                    title: '角色名称', 
                    dataIndex: 'name', 
                    ellipsis: true,
                    align: 'center' // 居中对齐
                },
                { 
                    title: '操作', 
                    width: 200, 
                    fixed: 'right',
                    align: 'center', // 居中对齐
                    render: (_, record) => (
                        <div style={{ display: 'flex', justifyContent: 'center' }}>- 
                            {/* 你可以在这里添加实际的操作按钮 */}
                            <Button variant="solid" onClick={() => {
                                setOpenAdd(true)
                                setEditContent({...editContent,id:record.id,name:record.name})
                            }} color="green" type="primary">修改</Button>
                            <Popconfirm
                                title="提示"
                                description="你确定要删除这条数据吗?"
                                onConfirm={()=>{del(Number(record.id))}}
                                okText="删除"
                                cancelText="取消"
                            >
                                <Button variant="solid" color="red" style={{marginLeft:'10px'}} type="primary">删除</Button>
                            </Popconfirm>
                        </div>
                    )
                }
            ])
        }
    }
    
    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        setSelectedRowKeys(newSelectedRowKeys);
    };
    
    const rowSelection: TableRowSelection<AdministratorroleListFace> = {
        selectedRowKeys,
        onChange: onSelectChange,
    };
    
    // 修改分页
    const onShowSizeChange: PaginationProps['onShowSizeChange'] = (current, pageSize) => {
        setParams({...Params, page: current, psize: pageSize});
    };
    
    const onChange: PaginationProps['onChange'] = (page, pageSize) => {
        setParams({
            ...Params, 
            page: page, 
            psize: pageSize || Params.psize
        });
    };
    
    return (
        <ConfigProvider locale={zhCN}>
            <div className='ContentBody'>
                <div className="header">
                    <p>角色列表</p>
                </div>
                <div className='AddBtn'>
                    <Button variant="solid" onClick={()=>setOpenAdd(true)} type="primary">添加</Button>
                </div>
                <Table<AdministratorroleListFace> 
                    rowSelection={rowSelection} 
                    columns={columns} 
                    dataSource={data} 
                    rowKey="id"
                    scroll={{ x: 'max-content' }}
                    tableLayout="auto"
                    style={{ width: '100%' }}
                    pagination={false} // 取消分页
                />
                <Pagination
                    showSizeChanger
                    onShowSizeChange={onShowSizeChange}
                    onChange={onChange}
                    current={Params.page}
                    pageSize={Params.psize}
                    total={total}
                    showTotal={(total) => `共 ${total} 条记录`}
                    showQuickJumper
                />
                {/* 添加和修改 */}
                <DiaLog openAdd={openAdd} refresh={refresh} editContent={editContent} />
            </div>
        </ConfigProvider>
    )
}